<template>
  <div
    class="
      bg-white
      w-full
      shadow-2xl
      rounded-lg
      flex flex-col
      items-center
      px-3
      
    "
  >
    <!-- 头像和菜单 -->
    <div class="w-full bg-white justify-between flex">
      <div class="m-5 flex">
        <el-avatar class="cursor-pointer" :size="50" :src="articleinfo.avatar"></el-avatar>
        <div class="ml-5">
          <p class="cursor-pointer">{{articleinfo.authorNickname}}</p>
          <p class="text-gray-400 font-semibold text-xs">{{articleinfo.updateTime}}</p>
        </div>
      </div>
      <div class="m-5 pt-2">
        <el-popover
          placement="bottom"
          title="标题"
          width="50"
          trigger="click"
          content="这是一段内容,这是一段内容,"
        >
          <el-button slot="reference">click 激活</el-button>
        </el-popover>
      </div>
    </div>
    <!-- 文章内容 -->
    <div class="w-full bg-white m-3 px-3">
      <div class="flex flex-col space-y-3">
        <p class="cursor-pointer" @click="gotoArticle(articleinfo.articleId)">{{articleinfo.articleTitle}}</p>
        <img
          class="min-h-0 max-h-80 cursor-pointer"
          @click="gotoArticle(articleinfo.articleId)"
          :src="articleinfo.articleImage"
        />
      </div>
    </div>
    <!-- 文章点赞信息 -->
    <div class="w-full bg-white justify-between flex px-3">
      <div class="m-3 flex items-center">
        <el-avatar :size="20" :src="avatarUrl"></el-avatar>
        <div class="ml-5">
          <p>HelloWorld</p>
        </div>
      </div>
      <div class="m-3 pr-10 flex flex-row space-x-3">
        <p class="flex text-gray-400">{{articleinfo.commentNum}}</p>
        <p class="flex text-gray-400">评论</p>
      </div>
    </div>
    <!-- 点赞评论 -->
    <div class="w-full bg-white flex mt-3 border-t-2 pt-5 pb-5 px-3">
      <div class="w-20 h-10 flex justify-center items-center ">
        <svg t="1628248745029" class="icon w-5 h-5 flex cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2673" width="200" height="200"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z" p-id="2674" fill="#8a8a8a"></path></svg>
        </div>
      <div class="w-20 h-10 flex justify-center items-center ">
        <svg t="1628249048244" class="icon w-5 h-5 flex cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3645" width="200" height="200"><path d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z" p-id="3646" fill="#8a8a8a"></path></svg>
      </div>
      <div class="w-20 h-10 flex justify-center items-center ">
        <svg t="1628249097678" class="icon w-5 h-5 flex cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3974" width="200" height="200"><path d="M853.333333 533.333333a32 32 0 0 1 64 0v266.666667c0 64.8-52.533333 117.333333-117.333333 117.333333H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V256c0-64.8 52.533333-117.333333 117.333333-117.333333h277.333333a32 32 0 0 1 0 64H224a53.333333 53.333333 0 0 0-53.333333 53.333333v544a53.333333 53.333333 0 0 0 53.333333 53.333333h576a53.333333 53.333333 0 0 0 53.333333-53.333333V533.333333z m-42.058666-277.333333l-89.792-95.402667a32 32 0 0 1 46.613333-43.861333l140.544 149.333333C927.861333 286.485333 913.376 320 885.333333 320H724.704C643.029333 320 576 391.210667 576 480v192a32 32 0 1 1-64 0V480c0-123.296 94.784-224 212.704-224h86.570667z" p-id="3975" fill="#8a8a8a"></path></svg>
      </div>
    </div>
  </div>
</template>
<script>
// import axios from "axios";
export default {
  name: "ArticleChild",
  data() {
    return {
      avatarUrl: 'null'
    }
  },
  methods:{
    gotoArticle(dqarticleid) {
      this.$router.push('/dqarticle/'+dqarticleid)
    }
  },
  props: {
    articleinfo: {
      type: Object,
      default: ()=>({

      })
    }
  }
};
</script>
<style scoped>
.myshadow {
  border-radius: 0px;
  background: #ebebeb;
  box-shadow: 5px 5px 17px #5e5e5e, -5px -5px 17px #ffffff;
}
</style>